<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>数据统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<style>
    .layui-top-box {padding:40px 20px 20px 20px;color:#fff}
    .panel {margin-bottom:17px;background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .panel-body {padding:15px}
    .panel-title {margin-top:0;margin-bottom:0;font-size:14px;color:inherit}
    .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
    .layui-red {color:red}
    .main_btn > p {height:40px;}
</style>
<body>
<div class="layuimini-container" style="height: 750px">
    <div class="layuimini-main layui-top-box">
        <div class="layui-row layui-col-space10" >

            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-cyan">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-blue">实时</span>
                                <h5>求职人数</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins" th:text="*{qiuzhi}"></h1>
                                <small>当前分类总记录数</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-black">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-cyan">实时</span>
                                <h5>招聘单位</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins" th:text="*{zhaoping}"></h1>
                                <small>当前分类总记录数</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-cyan">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-orange">实时</span>
                                <h5>岗位数量</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins" th:text="*{gangwei}"></h1>
<!--                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> 1234</div>-->
                                <small>当前分类总记录数</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-black">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-green">实时</span>
                                <h5>资讯数量</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins" th:text="*{zixun}"></h1>
<!--                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> 1234</div>-->
                                <small>当前分类总记录数</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space15" style="margin-top: 80px">
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-line" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
    </div>

</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['layer', 'echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            echarts = layui.echarts;


        /**
         * 求职人数柱状图
         */
        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
        var optionRecords = {
            title: {
                text: '求职人数'
            },
            xAxis: {
                type: 'category',
                data: ['2019级', '2020级', '2021级', '2022级']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [],
                    type: 'bar'
                }
            ]
        };
        //动态传入各年级人数
        var datamin = new Array(4);
        $(function(){
            $.get("/getQzNumber",function(obj){
                datamin[0]=obj["grade2019"];
                datamin[1]=obj['grade2020'];
                datamin[2]=obj['grade2021'];
                datamin[3]=obj['grade2022'];
                echartsRecords.setOption({
                    series: [
                        {
                            data: datamin,
                            type: 'bar'
                        }
                    ]
                })
            },"json")
        });
        echartsRecords.setOption(optionRecords);

        /**
         * 岗位数量
         */
        var echartsLine = echarts.init(document.getElementById('echarts-line'), 'walden');
        var optionLine = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['岗位数量','资讯数量']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['3月','4月','5月','6月','7月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'岗位数量',
                    type:'line',
                    data:[]
                },
                {
                    name:'资讯数量',
                    type:'line',
                    data:[]
                }
            ]
        };

        // getGwAndZxNumber
        //动态传入各月份 岗位数量和资讯数量
        var gwnumber = new Array(6);
        var zxnumber = new Array(6);
        $(function(){
            $.get("/getGwAndZxNumber",function(obj){
                //将岗位数量从json取出
                gwnumber[0]=obj[0]["3月"];
                gwnumber[1]=obj[0]["4月"];
                gwnumber[2]=obj[0]["5月"];
                gwnumber[3]=obj[0]["6月"];
                gwnumber[4]=obj[0]["7月"];
                //将资讯数量从json取出
                zxnumber[0]=obj[1]["3月"];
                zxnumber[1]=obj[1]["4月"];
                zxnumber[2]=obj[1]["5月"];
                zxnumber[3]=obj[1]["6月"];
                zxnumber[4]=obj[1]["7月"];
                echartsLine.setOption({
                    series: [
                        {
                            name:'岗位数量',
                            type:'line',
                            data:gwnumber
                        },
                        {
                            name:'资讯数量',
                            type:'line',
                            data:zxnumber
                        }
                    ]
                })
            },"json")
        });
        echartsLine.setOption(optionLine);
    });
</script>
</body>
</html>